<template>
  <div>
    <el-dialog title="账单详情" :visible="dialogVisible" :close-on-click-modal="false" @close="close" width="800px">
      <el-descriptions title="" :column="2" border :labelStyle="{minWidth:'80px',width:'80px',textAlign:'right'}" :contentStyle="{minWidth:'100px',textAlign:'left'}">
        <el-descriptions-item label="申请时间" :span="2">{{orderInfo.createTime}}</el-descriptions-item>
        <el-descriptions-item label="收款账户">{{orderInfo.details}}</el-descriptions-item>
        <el-descriptions-item label="对方名称">{{orderInfo.jiaoyiName}}</el-descriptions-item>
        <el-descriptions-item label="订单类型">
          <span>{{ commonMaps.tenantBillOrderTypeMap[orderInfo.orderType] }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="关联单号">{{orderInfo.orderNo}}</el-descriptions-item>
        
        <el-descriptions-item label="应付金额" :span="2">
          <span style="color:red;font-size:16px;font-weight:bold">¥{{orderInfo.amount}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="申请备注" :span="2">{{orderInfo.sqRemark}}</el-descriptions-item>
        <el-descriptions-item label="打款备注" :span="2">{{orderInfo.remark}}</el-descriptions-item>
        <el-descriptions-item label="图片附件" :span="2">
          <div class="img-box flex">
            <div v-for="(item, ind) in imgs" :key="item">
              <img :src="item" @click="review(imgs,ind)" />
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <div style="height:20px"></div>

      <!-- <el-form :model="ruleForm" ref="ruleForm" :inline="true" label-width="80px" :rules="rules" class="demo-ruleForm">
        <el-form-item label="备注:" prop="remark">
          <el-input style="width:500px" type="textarea" v-model="ruleForm.remark" rows="3" placeholder="请输入备注"></el-input>
        </el-form-item>
        <el-form-item label="打款凭证">
          <el-upload :action="uploadImgUrl" :file-list="imgFileList" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-exceed="uploadNumber" :multiple="true" :drag="true" :on-success="handleUploadSuccess" :limit="5" :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="center">
        <el-button @click="close('ruleForm')">取消</el-button>
        <el-button type="danger" @click="refuse('ruleForm')" :loading="loading">拒绝打款</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认打款</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import billListApi from "@/api/financeCenter/billList.js";
export default {
  name: "editPrice",
  data() {
    var priceRule = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        if (!this.priceReg.test(value)) {
          callback(new Error("请输入正确的价格"));
        }
        callback();
      }
    };
    return {
      dialogVisible: false,
      loading: false,
      uploadImgUrl: "",
      newImages: [],
      imgFileList: [],
      ruleForm: {
        id: "",
        remark: "",
        img: "",
      },
      imgs: [],
      orderInfo: {},
      baopeiZhanghu: {},
      sellerZhanghu: "",
      rules: {},
      userType: "",
      billId: "",
    };
  },
  created() {
    this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";
  },
  methods: {
    open(id) {
      this.loading = false;
      this.billId = id;
      this.getBillDetail()
      this.dialogVisible = true;
    },
    getBillDetail() {
      billListApi
        .tenantFinancialStatementInfoBuId(this.billId)
        .then((res) => {
          this.imgs = []
          this.orderInfo = {...res.data}
          if(this.orderInfo.img){
            const arr = this.orderInfo.img.split(',')
            arr.forEach(r => {
              if(r){
                this.imgs.push(r)
              }
            });
          }
        });
    },
    review(list, ind) {
      this.$viewerApi({
        images: list,
        options: {
          initialViewIndex: ind,
        },
      });
    },
    close(formName) {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.img-box {
  img {
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
